<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content='text/html' charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<meta name="Author" content="Jktime">
  	<meta name="Keywords" content="learning beginner">
  	<meta name="Description" content="study html css">
  	<title>这事儿不简单</title>
  	<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="icons/pandao.ico">
  	<link rel="stylesheet" type="text/css" href="css/reset.css">
  	<link rel="stylesheet" type="text/css" href="css/common.css">
  	<link rel="stylesheet" type="text/css" href="css/tylog.css">
  	<link rel="stylesheet" type="text/css" href="css/move.css">
  	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  	<script type="text/javascript" src="js/requestdata.js"></script>
  	<script type="text/javascript">
  		window.onload = function(){
  			var devbn = document.querySelector('.devbtn'),odev = document.getElementsByTagName('ul')[0],odp = odev.style;
  			devbn.onclick = function(){
  				odev.style.display = odp.display == 'block' ? 'none' : 'block';
  			}
  		}
  	</script>
</head>
<body>
	<div class ="public-header clear">
		<a class="musicbar"><img src="images/musicbar.png" height="44"></a>
		<ul class="devicewd">
				<li><a class="younger" href="index.html">首页</a></li>
				<li><a class="toyounger" href="aboutme.html">关于我</a></li>
				<li><a class="younger" href="learning.html">学习之路</a></li>
				<li><a class="younger" href="mailto:1277139516@qq.com">邮箱</a></li>
		</ul>
		<div class="container ">
			<a href="" class="logo"><h3>A Beginner</h3></a>
			<div class="devbtn"></div>
			<ul class="column">
				<li><a class="toyoung" href="index.html">首页</a></li>
				<li><a class="toyoung" href="aboutme.html">关于我</a></li>
				<li><a class="toyoung" href="learning.html">学习之路</a></li>
				<li><a class="toyoung" href="mailto:1277139516@qq.com">邮箱</a></li>
			</ul>
		</div>
	</div>
	<div class="musicbox">
		<div class="closeme"><img src="images/close.png" width="15" height="15">关闭我</div>
		<i class="movebar"></i>
		<form class="searchbar">
			<input class="schtxt" type="text" placeholder="Lovely Music">
			<input class="schbt" type="button" value="查找" onclick="getTxt()">
		</form>
		<div class="content">
			<p class="micname"></p>
			<p class="micname"></p>
			<p class="micname"></p>
			<p class="micname"></p>
			<p class="micname"></p>
			<p class="micname"></p>
			<audio controls="controls" class="msplay">
				Your browser does not support the audio element.
			</audio>
		</div>
	</div>
	<div class ="public-body container">
		<div class="movebox">
			<div class ="pon" id ="omu">
			<div class ="imgbox" >
				<img class ="dd" alt ="harder" width="100%" height="100%"  src ="http://photocdn.sohu.com/20160219/mp59593329_1455862859290_1_th.jpeg">
				<img width="100%" height="100%" alt ="" src ="http://img001.hc360.cn/m6/M05/16/55/wKhQoVdJSnCEOnagAAAAAHbulfs501.jpg">
				<img width="100%" height="100%" alt ="" src ="http://upload.365jilin.com/2016/0226/1456452492186.jpg">
			</div>
			<div class ="bar" id ="mbar">
				<span class ="spbg">1</span>
				<span>2</span>
				<span>3</span>
			</div>
			<div class ="button" id ="contl">
				<a class ="lft-bar" id ="right"></a>
				<a class ="rgt-bar" id ="left"></a>
			</div>
			</div>
		</div>
		<div class="pages-list clear">
			<div class="title clear">
				<h2>最近动态</h2>
				<span>你有多努力,就有多幸运</span>
			</div>
			<ul class="cont">
				<!-- <li >
					<h3><a href="" class="cont-title">第一次尝试</a></h3>
					<div class="main-des clear">
						<a class="hov"><img></a>
						<p></p>
					</div>
					<div class="tag clear">
						<i>2018.3.27</i>
						<a href="learning.html">阅读原文>>></a>
					</div>
				</li> -->
			</ul>
		</div>
	</div>
	<div class ="public-footer">
		<p class="container">Design by Chen, Welcom To Visit</p>
	</div>
	<script type="text/javascript" src="js/mine.js"></script>
	
	<script type="text/javascript" src="js/load.js"></script>
	<script type="text/javascript">
		var fther = document.querySelector('.cont');
		getDa();
		function getDa(){
			var req = new XMLHttpRequest(),data;
			req.onreadystatechange =function (){
				if (req.readyState === 4 && req.status === 200){
					data = JSON.parse(req.responseText);
					dlta(data);
				}
			}
			req.open('get','./data.json',true);
			req.send(null);
		}
		function dlta(source){
			var doc = document.createDocumentFragment();
			source.forEach(function(item,index){
				var elet = document.createElement('li');
				elet.innerHTML =`<h3><a href="learning.html?p=${index}" class="cont-title">${item.title}</a></h3>
					<div class="main-des clear">
						<a class="hov"><img src=${item.img}></a>
						<p>${item.content}</p>
					</div>
					<div class="tag clear">
						<i>${item.date}</i>
						<a href="learning.html?p=${index}">阅读原文>>></a>
					</div>` ;
					doc.appendChild(elet);
			});
			fther.appendChild(doc);
		}
		/*--------轮播图js-----*/
		var mous =document.getElementById('omu'),lb =document.getElementById('left'),rb =document.getElementById('right'),ct =document.getElementById('contl'),sp =ele.fidcTg('mbar','span'),igs =mous.getElementsByTagName("img"),j =0,t,i,z;
				//清除样式
		function clear(z){
			for (i =0;i < igs.length;i++){
				if (i == z){
					igs[i].className ="dd";
					sp[i].className ="spbg";
					igs[i].style.opacity ="1";
				}
				else{
					igs[i].className ="";
					igs[i].style.opacity ="0.4";
					sp[i].className ="";
				}
			}
		}
		//设置时间循环
		setime();
		function setime(){
			t =setInterval('add()',4000);
		}
		function add(){
			if (j == 2){
				j =-1;
			}
			j++;
			clear(j);
		}
		function min(){
			if (j == 0){
				j =3;
			}
			j--;
			clear(j);
		}
		mous.onmouseover =function (){
			clearInterval(t);
		}
		mous.onmouseout = function (e){
			setime();
			(e.stopPropagation)?(e.stopPropagation()): e.cancelBubble = true;
		}
		lb.onmousedown = function (e){
			add();
			(e.stopPropagation)?(e.stopPropagation()): e.cancelBubble = true;
		}
		rb.onmousedown = function (e){
			min();
			(e.stopPropagation)?(e.stopPropagation()): e.cancelBubble = true;
		}
		for (var n =0;n < sp.length;n++){
			(function (n){
				sp[n].onmousedown =function (e){
					clear(n);
					j =n;
					(e.stopPropagation)?(e.stopPropagation()): e.cancelBubble = true;
				}
			})(n);
		}
	</script>
</body>
</html>